<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 4.2 自适应布局 </title>


		<style type="text/css">
			* {
				box-sizing: border-box;
				padding: 0;
				margin: 0;
			}

			body {
				color: white;
				font-size: 25px;
				
			}
			
			h1  {
				color: black;
			}

			.container {

				display: flex;
				
				height: 50px;

			}

			div:nth-child(1) {

				background-color: #bbb;
				/* 固定宽度 */
				flex: 0 0 50px;

			}

			div:nth-child(2) {
				background-color: yellow;
				/* 自动伸缩 */
				flex: 1 1 auto;
			}

			div:nth-child(3) {
				background-color: #bbb;
				/* 固定宽度 */
				flex: 0 0 50px;

			}

	
			
			@media (max-device-width:500px)  and (min-device-width:400px)  {
				
				div:nth-child(2) {
				
					background-color: green;
					flex: 1 1 auto;
				}
			}
			
			
			@media (max-device-width:600px)  and (min-device-width:501px)  {
				div:nth-child(2) {
					background-color: blue;
					flex: 1 1 auto
				}
			}
		</style>
	</head>


	<body>
		<h1>mobiel html </h1>


		<div class="container">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>

		</div>

	</body>
</html>
